<script setup>



import { videoRandom } from '@/api/video'



const windowWidth = ref(0)
const windowHeight = ref(0)
const platform = ref("")
const model = ref("")
const deleteHeight = ref(0)
const boxStyle = reactive({ // 视频 图片封面
    'height': 0,
    'width': 0,
})
const dataList = reactive([]) // 视频列表
const isShow = ref(false)
const k = ref(0)
const videoID = ref('')
const rotateTime = ref('') //转轮递归事件控制
const showPlay = ref(false) //转轮显示控制
const rotates = ref(0) //转轮旋转角度
const mpstartTime = ref(0)
const mptime = ref(0)
const isClick = ref(false)
const timeduration = ref(0)
const current = ref(1)
const xrotats = ref('')
const changeTimeout = ref('')
const headerHeight = ref(0);
const Custom = ref({});
const headerstatus = ref(0);
const app = getApp();
const isSearch = ref(false)
const commPop = ref()
const videoProduct = ref([]) //视频同款商品
const commentList = ref([]) //评论列表
const followPage = ref(1)
const followPageSize = ref(10)
const followState = ref('loading')

const createVideoContext = (id, that) => {
    const k = Number(id.split('-')[1])
    let context = dataList[k].context
    if (context) return context
    // #ifdef APP-PLUS
    context = uni.createVideoContext(id)
    // #endif
    // #ifndef APP-PLUS
    context = uni.createVideoContext(id, that)
    //   #endif
    dataList[k].context = context
    return context
}

onReady(() => {
    const sysInfo = uni.getSystemInfoSync()

    windowWidth.value = sysInfo.windowWidth
    windowHeight.value = sysInfo.windowHeight - uni.upx2px(100)

    console.log(sysInfo)
    console.log('---------------------------------------------')

    // #ifdef MP-WEIXIN
    const custom = wx.getMenuButtonBoundingClientRect();
    headerHeight.value = custom.bottom + custom.top - sysInfo.statusBarHeight;
    headerstatus.value = sysInfo.statusBarHeight;
    Custom.value = custom;
    console.log(custom)
    // #endif

    // #ifdef H5 || APP-PLUS
    if (sysInfo.platform === 'android') {
        headerHeight.value = sysInfo.statusBarHeight + 48;
    } else {
        headerHeight.value = sysInfo.statusBarHeight + 44;
    }
    Custom.value = {
        top: sysInfo.statusBarHeight + 10,
        height: 40
    }
    // #endif
});

// let audo = uni.createInnerAudioContext()
// audo.loop = true


onLoad(async () => {
    platform.value = uni.getSystemInfoSync().platform
    model.value = uni.getSystemInfoSync().model
    if (platform.value == 'ios' && !['iPhone6', 'iPhone6s', 'iPhone7', 'iPhone8'].includes(model.value)) {
        deleteHeight.value = 0 //有 tabbar的 修改这里可以改变视频高度
    }
    console.log(uni.getSystemInfoSync())
    windowWidth.value = uni.getSystemInfoSync().windowWidth
    windowHeight.value = uni.getSystemInfoSync().windowHeight
    boxStyle.width = windowWidth.value + 'px' //给宽度加px
    boxStyle.height = windowHeight.value - deleteHeight.value; //有 tabbar的 修改这里可以改变视频高度
    await init() //加载数据
    // if (dataList.length !== 0) {
    //     const {
    //         data: detailData
    //     } = await GetVideoDetail({
    //         pk_video_id: dataList[k.value].id
    //     })
    //     dataList[k.value].collected = detailData.collected
    //     if (detailData.is_store == 1) dataList[k.value].storeCollected = detailData.storeCollected
    //     dataList[k.value].liked = detailData.liked
    //     dataList[k.value].v_state = 'play';
    //     dataList[k.value].store_longitude = detailData.store_longitude
    //     dataList[k.value].store_latitude = detailData.store_latitude
    //     dataList[k.value].store_name = detailData.store_name
    //     dataList[k.value].store_street = detailData.store_street
    //     dataList[k.value].is_store = detailData.is_store
    //     // createVideoContext(dataList[k.value].pk_video_id + '' + k.value, this).play()
    // }
})
onShow(() => {
    if (dataList.length !== 0) {
        dataList[k.value].v_state = 'play';
        createVideoContext(dataList[k.value].id + '-' + k.value, this).play()
    }
})
onHide(() => {
    // console.log('onHide----------------------------')
    dataList[k.value].v_state = 'pause';
    createVideoContext(dataList[k.value].id + '-' + k.value, this).stop()
})


// 对外抛出 全局分享使用
defineExpose({
    dataList,
    k
})
// 获取视频列表
async function getVideoList() {
    return new Promise((resolve) => {
        uni.request({
            url: 'https://syh.app.dev.jijianjide.com/api/GetVideoList?pageSize=5',
            method: 'get',
            data: {
            },
            success: (res) => {
                resolve(res.data)
            }
        })
    })
}

// 获取视频详情
async function GetVideoDetail({ pk_video_id }) {
    return new Promise((resolve) => {
        uni.request({
            url: `https://syh.app.dev.jijianjide.com/api/GetVideoDetail?pk_video_id=${pk_video_id}`,
            method: 'get',
            data: {
            },
            success: (res) => {
                resolve(res)
            }
        })
    })
}

// 请求数据
const getList = async () => {
    const {
        data
    } = await videoRandom()
    console.log('--------------------------data-------------------------')
    console.log(data)
    return data.map(item => {
        return {
            ...item,
            isplay: true,
            isShowimage :false,
            isShowProgressBarTime :false,
        }
    })

}
const isReset = ref(false)
watch(() => current.value, async (newVal, oldVal) => {
    // if (newVal === 1 && !isReset.value) return isReset.value = true
    // if (newVal === 0) {
    //     let {
    //         data: loginCheck
    //     } = await checkToken()
    //     if (!loginCheck.data) {
    //         loginUtils.authView()
    //         current.value = 1
    //         isReset.value = false
    //         return
    //     }
    //
    //     let res = await GetAttentionVideoList({
    //         page: followPage.value,
    //         pageSize: followPageSize.value
    //     })
    //     if (!res.data.total) {
    //         uni.showToast({
    //             icon: 'none',
    //             title: '没有关注的视频'
    //         })
    //         current.value = 1
    //         isReset.value = false
    //         return
    //     }
    //     isReset.value = true
    // }
    // dataList.splice(0, dataList.length);
    // k.value = 0
    // await init()
    // if (dataList.length !== 0) {
    //     const {
    //         data: detailData
    //     } = await GetVideoDetail({
    //         pk_video_id: dataList[k.value].pk_video_id
    //     })
    //     dataList[k.value].collected = detailData.collected
    //     if (detailData.is_store == 1) dataList[k.value].storeCollected = detailData.storeCollected
    //     dataList[k.value].liked = detailData.liked
    //     dataList[k.value].v_state = 'play';
    //     dataList[k.value].store_longitude = detailData.store_longitude
    //     dataList[k.value].store_latitude = detailData.store_latitude
    //     dataList[k.value].store_name = detailData.store_name
    //     dataList[k.value].store_street = detailData.store_street
    //     dataList[k.value].is_store = detailData.is_store
    //     console.log(detailData.is_store, 'is_store')
    //     createVideoContext(dataList[k.value].pk_video_id + '-' + k.value, this).play()
    // }
})

const searchKey = ref('')
const search = () => {
    uni.navigateTo({
        url: `/video/videoSearch?searchKey=${searchKey.value}`
    })
    searchKey.value = ''
}

//评论
const commentPage = ref(1)
const commentPageSize = ref(10)
const commentState = ref(2)

//评论分页
// const commentBottom = () => {
//     if (commentState.value === 3 || commentState.value === 2) return
//     commentState.value = 2
//     console.log('commentBottom', commentPage.value, 'commentPage')
//     GetVideoCommentList({
//         fk_video_id: dataList[k.value].pk_video_id,
//         page: commentPage.value,
//         pageSize: commentPageSize.value
//     }).then(res => {
//         commentList.value.push(...res.data.list)
//         commentPage.value += 1
//         if (commentList.value.length < res.data.total) {
//             commentState.value = 1
//         } else {
//             commentState.value = 3
//         }
//     })
// }
//发送评论
const commentVal = ref('')
const sendComment = (e) => {
    if (!commentVal.value) return false
    const fk_comment_id = replyComment.value.pk_video_comment_id || ''
    saveVideoComment({
        fk_video_id: dataList[k.value].pk_video_id,
        content: commentVal.value,
        fk_comment_id
    }).then(res => {
        if (!res.code == 200) return false
        commentVal.value = ''
        dataList[k.value].commented_no += 1
        if (fk_comment_id) {
            const index = commentList.value.findIndex(v => v.fk_comment_id == replyComment.value
                .fk_comment_id)
            console.log(commentList.value[index])
            if (!commentList.value[index].reply) commentList.value[index].reply = []
            commentList.value[index].reply.unshift({
                ...res.data
            })
            commentList.value[index].isOpen = true
        } else {
            commentList.value.unshift({
                ...res.data,
            })
        }
    })
}
const commitFocus = ref(false)
const replyComment = ref({})

//展开二级评论
const openCommitList = (item) => {
    if (!item.reply) {
        item.replyPage = 1
        item.pageSize = 3
        GetVideoCommentReplyList({
            pk_video_comment_id: item.pk_video_comment_id,
            page: item.replyPage,
            pageSize: item.pageSize
        }).then(res => {
            item.reply = res.data.list
            item.isOpen = true
        })
    } else {
        item.isOpen = true
    }
}
//展开更多
const openCommitMore = (item) => {
    item.replyPage += 1
    GetVideoCommentReplyList({
        pk_video_comment_id: item.pk_video_comment_id,
        page: item.replyPage,
        pageSize: item.pageSize
    }).then(res => {
        item.reply.push(...res.data.list)
    })
}
//回复评论
const sendReply = (item) => {
    console.log(item, 'replyComment')
    replyComment.value = item
    commitFocus.value = true
    console.log(item)
}

//评论点赞
const commitLike = (fk_video_comment_id, liked, index, index2) => {
    SaveVideoCommentLike({
        fk_video_comment_id,
    })
    if (index2 !== undefined) {
        if (liked === 1) {
            commentList.value[index].reply[index2].liked_no -= 1
            commentList.value[index].reply[index2].liked = 2
        } else {
            commentList.value[index].reply[index2].liked_no += 1
            commentList.value[index].reply[index2].liked = 1
        }
    } else {
        if (liked === 1) {
            commentList.value[index].liked_no -= 1
            commentList.value[index].liked = 2
        } else {
            commentList.value[index].liked_no += 1
            commentList.value[index].liked = 1
        }
    }
}
const commitBlus = () => {
    commitFocus.value = false
    if (!commentVal.value) {
        replyComment.value = {}
    }
    console.log('blus', replyComment.value)
}
const init = () => {
    return new Promise(async (resolve, reject) => {
        isShow.value = false
        let list = []
        console.log('current', current.value)
        if (current.value) {
            list = await getList()
        } else {
            followState.value = 'loading'
            const res = await GetAttentionVideoList({
                page: followPage.value,
                pageSize: followPageSize.value
            })
            list = res.data.list
            if (list.length < res.data.total) {
                followState.value = 'loadMaore'
                followPage.value += 1
            } else {
                followState.value = 'noMore'
            }
        }

        dataList.push(...list)
        setTimeout(() => {

            isShow.value = true
            dataList[k.value].v_state = 'play'
            dataList[k.value].isplay = false
            setTimeout(() => {
                try {
                    createVideoContext(dataList[k.value].pk_video_id + '-' + k.value)
                        .play()
                    videoID.value = dataList[k.value].pk_video_id
                    resolve()
                } catch (error) {
                    reject(error)
                }
            }, 500)
        }, 200)
    })
}

const animationfinish = (event) => {
    // 1.这里进行判断，如果是最后一个视频就进入 get() 方法加载视频进入列表
    if (k.value == dataList.length - 1) {
        GET()
    }
}
//每一组结束时新的请求
const GET = async () => {
    let res = []
    if (current.value) {
        res = await getList()
    } else {
        if (followState.value === 'noMore') return
        followState.value = 'loading'
        const list = await GetAttentionVideoList({
            page: followPage.value,
            pageSize: followPageSize.value
        })
        res = list.data.list
        if (dataList.length + res.length < list.data.total) {
            followState.value = 'loadMaore'
            followPage.value += 1
        }
    }
    // 2.这里把视频添加到视频列表
    for (let i = 0; i < res.length; i++) {
        dataList.push(res[i])
    }

}
const commShow = () => {
    if (commentList.value.length === 0) {
        GetVideoCommentList({
            fk_video_id: dataList[k.value].pk_video_id,
            page: commentPage.value,
            pageSize: commentPageSize.value
        }).then(res => {
            commentList.value = res.data.list
            commentPage.value += 1
            if (commentList.value.length < res.data.total) {
                commentState.value = 1
            } else {
                commentState.value = 3
            }
            console.log('commentList', commentList)
        })
    }
    commPop.value.open()
}
const change = async (event) => {
    videoProduct.value = []
    k.value = event.detail.current
}


let touchStartInfo = 0
let touchEndInfo = 0
const mpTouchstart = (e) => {

    console.log('mpTouchstart', e)
    touchStartInfo = e.changedTouches[0]
    mpstartTime.value = (new Date() / 1000);
}
const mpTouchend = (e) => {
    console.log('mpTouchend', e)
    mptime.value = (new Date() / 1000) - mpstartTime.value
    touchEndInfo = e.changedTouches[0]

}

const followClick = (item, type) => {
    if (item.fk_store_id) {
        storeFollow({
            fk_store_id: item.fk_store_id,
            type
        })
        item.storeCollected = type
    } else {
        followUser({
            fk_admin_id: item.fk_member_id,
            type
        })
        item.collected = type
    }
    uni.showToast({
        icon: 'none',
        title: '关注成功'
    })
    console.log(item)

}

const onLike = (item) => {
    saveMemberVideoLike({
        fk_video_id: item.pk_video_id
    })
    if (item.liked == 1) {
        item.liked = 2
        item.liked_no -= 1
    } else {
        item.liked = 1
        item.liked_no += 1
        uni.showToast({
            icon: 'none',
            title: '点赞成功'
        })
    }
}

const touchNum = ref(0)
//点击播放&&暂停
const tapVideoHover = (v_state, event) => {
    console.log('tapVideoHover-----------------------')
    if (Math.abs(touchEndInfo.pageY - touchStartInfo.pageY) > 3 || Math.abs(touchEndInfo.pageX - touchStartInfo
        .pageX) > 3) return
    touchNum.value++
    setTimeout(() => {
        if (touchNum.value == 1) {
            console.log('单击')
            if (v_state == 'play' || v_state == 'continue') {
                dataList[k.value].v_state = 'pause';
            } else {
                dataList[k.value].v_state = 'continue';
            }
            if (dataList[k.value].v_state == 'continue') {
                isClick.value = true;
                createVideoContext(dataList[k.value].pk_video_id + '-' + k.value, this).play(); //暂停以后继续播放
                dataList[k.value].isplay = false
            }
            if (dataList[k.value].v_state == 'pause') {
                createVideoContext(dataList[k.value].pk_video_id + '-' + k.value, this).pause(); //暂停以后继续播放
                dataList[k.value].isplay = true
            }
        }
        if (touchNum.value >= 2) {
            //点赞
            onLike(dataList[k.value])
        }
        console.log('touchNum', touchNum.value)
        touchNum.value = 0
        console.log('touchNum', touchNum.value)

    }, 250)
}


const clearToTime = () => {
    for (let i = 0; i < 20; i++) {
        clearTimeout(rotateTime.value);
        clearTimeout(xrotats.value);
        showPlay.value = false;
        rotates.value = 0;
    }
}

const clearTime = () => {
    //清理定时器
    for (let i = 0; i < 20; i++) {
        clearTimeout(rotateTime.value);
        clearTimeout(xrotats.value);
    }
}

watch(() => k.value, (k, old_k) => {
    if (k === undefined || old_k === undefined || !dataList[old_k]) return
    // #ifdef MP
    isShow.value = false
    // #endif
    dataList[old_k].isplay = true
    dataList[old_k].v_state = 'pause'
    // #ifdef MP-WEIXIN
    // ios下会出现滑动卡顿，所以这里加了一个stop
    if (platform.value == 'ios') {
        createVideoContext(dataList[old_k].pk_video_id + '-' + old_k, this).stop()
    }
    // #endif
    replyComment.value = {}
    commentList.value = []
    commentPage.value = 1


    GetVideoDetail({
        pk_video_id: dataList[k].pk_video_id
    }).then(res => {
        dataList[k].collected = res.data.collected
        if (res.data.is_store) dataList[k].storeCollected = res.data.storeCollected
        dataList[k].liked = res.data.liked
        dataList[k].store_longitude = res.data.store_longitude
        dataList[k].store_latitude = res.data.store_latitude
        dataList[k].store_name = res.data.store_name
        dataList[k].store_street = res.data.store_street
        dataList[k].is_store = res.data.is_store
        videoProduct.value = res.data

        dataList[k].isplay = false
        dataList[k].v_state = 'play'
        // #ifdef MP
        isShow.value = true
        // #endif

        clearTimeout(changeTimeout.value)

        nextTick(() => {
            createVideoContext(dataList[k].pk_video_id + '-' + k, this).play()
        })
    })
})
    const close = () => {
        commPop.value.close()
    }
    const wantPop = ref()
    const onPopupClick = async () => {
        wantPop.value.open()
    }

    const onSameClose = () => {
        wantPop.value.close()
    }

    const goPage = (url) => {
        console.log(url, '你点到我了')
        uni.navigateTo({
            url
        })
    }
    const isLike = ref(false);

    let isDragging = false
    let timers = null
    const scrolls = (event) => {
        isDragging = event.isDragging
        if (!event.isDragging) { //isDragging：判断用户是不是在滑动，滑动：true，停止滑动：false。我们要用户停止滑动时才给 k 赋值，这样就可以避免很多麻烦
            const i = Math.round(Math.abs(event.contentOffset.y) / (windowHeight.value - deleteHeight.value +
                1)) //先用绝对值取出滑动的距离，然后除以屏幕高度，取一个整，就知道你现在滑动到哪一个视频了
            if (i !== k.value) { //这里加判断是因为这个方法会执行很多次，会造成重复请求，所以这里写一个限制
                clearTimeout(timers);
                timers = setTimeout(() => {
                    k.value = i //判断了用户没有滑动，确认了用户的确是在看这个视频，然后就赋值啦

                    dataList[k.value].v_state = 'play'
                    console.log('正在播放 --> 第' + (k.value + 1) + '个视频～')

                    if (k.value === dataList.length - 1) {
                        GET();
                    }
                }, 80)
            }
        }
    }
</script>

<template>
    <!-- 顶部 -->
    <view class="v-header" :style="{paddingTop: Custom.top+'px',justifyContent:isSearch ? 'flex-start' : 'center'}">
        <template v-if="true">
            <view class="search-left" @click="$jump('/views/subViews/videoPage/searchVideo/index')">
                <fui-icon name="search" color="#FFFFFF" :size="40"></fui-icon>
            </view>
            <view class="searcg-center">
                <view :style="{height:Custom.height+'px'}"
                      :class="{ 'searcg-center-item': true, 'search-active': current == 0 }" @click="current = 0">
                    <text style="color: #fff">关注</text>
                </view>
                <view :style="{height:Custom.height+'px'}"
                      :class="{ 'searcg-center-item': true, 'search-active': current == 1 }" @click="current = 1">
                    <text style="color: #fff">热门</text>
                </view>
            </view>
        </template>
        <template v-else>
            <view class="search-big u-flex">
                <fui-icon class="s-icon-big" name="search" color="#ffffff" :size="40"></fui-icon>
                <fui-input v-model="searchKey" placeholder="关键词搜索" :borderTop="false" :borderBottom="false"
                           class="search-top" placeholderStyle="color:#ffffff;font-size:28rpx"
                           backgroundColor="rgba(0, 0, 0, 0.2)" radius="999" :padding="[0,0,0, '80rpx']" size="28"
                           @confirm="search" color="#fff" style="height: 72rpx">
                    <fui-icon style="padding-right: 8rpx;" name="clear-fill" color="#FFFFFF" :size="40"
                              @click="isSearch = false"></fui-icon>
                </fui-input>
            </view>
        </template>
    </view>

    <!-- #ifdef APP -->
    <list @scroll="scrolls" :loadmoreoffset="windowHeight*3" :show-scrollbar="false" ref="listBox" :pagingEnabled="true"
          :scrollable="true">
        <cell v-for="(list,index) in dataList" :key="index">
            <!-- #endif -->

            <!-- #ifndef APP -->
            <swiper :style="'width: '+ windowWidth +'px; height:' + windowHeight + 'px; background-color: #000000;'"
                    :vertical="true" @animationfinish="animationfinish" @change="change" :indicator-dots="false">
                <swiper-item v-for="(list,index) in dataList" :key="index" @touchstart="mpTouchstart"
                             @touchend="mpTouchend">
                    <!-- #endif -->
                    <view :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px;'">
                        <view v-if="Math.abs(k-index)<=1">
                            <view @tap.stop="tapVideoHover(list.v_state,$event)">

                                <!--<video v-if="isShow" :id="list.pk_video_id+'-'+index" :loop="true" :muted="list.isplay"-->
                                <video  :id="list.id+'-'+index" :loop="true" :muted="list.isplay"
                                        :controls="false" :http-cache="true" :page-gesture="false"
                                        :show-fullscreen-btn="false" :show-loading="false" :show-center-play-btn="false"
                                        :enable-progress-gesture="false" :src="list.url"
                                        :style="'width: '+ windowWidth +'px; height:' + windowHeight + 'px;background-color: #000000; z-index: -1;'"
                                        :poster="list.frameUrl"
                                        :object-fit="list.width > list.height ? 'contain' : 'cover'"></video>
                            </view>

                            <!-- 播放状态：pause 的时候就会暂停 -->
                            <view class="videoHover" @tap.stop="tapVideoHover(list.v_state,$event)"
                                  :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px;'">
                                <image v-if="list.v_state=='pause'" class="playState"
                                       src="https://sanyanhu.oss-cn-shenzhen.aliyuncs.com/app/static/play.png"></image>
                            </view>
                            <!-- 侧边 -->
                            <view class="userInfo">
                                <!-- 导航工厂 -->
                                <view v-if="list.is_store == 1" class="Navigation-Factory center-row"
                                      @tap.stop="openMap(index)">
                                    <image style="width: 120rpx;height: 120rpx;"
                                           src="https://sanyanhu.oss-cn-shenzhen.aliyuncs.com/app/icon/location.gif">
                                    </image>
                                    <text class="Navigation-Factory-text">导航工厂</text>
                                </view>
                                <!-- 头像 -->
                                <view class="avatar center-row">
                                    <image class="avatar-image"
                                           :src="list.is_store === 1 ? list.store_pic : list.member_headimg"
                                           mode="aspectFit" @tap.stop="goUserProfile(list.fk_store_id,list.fk_member_id)">
                                    </image>
                                    <image class="attention-bn"
                                           src="https://sanyanhu.oss-cn-shenzhen.aliyuncs.com/app/icon/plus-circle.png"
                                           v-if="list.is_store === 1 ? list.storeCollected === 2 : list.collected === 2"
                                           @tap.stop="followClick(list,1)">
                                    </image>

                                </view>

                                <!-- 点赞 -->
                                <view class="Navigation-Factory center-row mb-36" @click="onLike(list)">
                                    <fui-icon name="like-fill" :color="list.liked === 1 ? '#DF222D' : '#fff'"
                                              :size="60"></fui-icon>
                                    <text class="Navigation-Factory-text">{{ list.liked_no }}</text>
                                </view>
                                <!-- 评论 -->
                                <!--								TODO 微信小程序审核不通过, 先隐藏 -->
                                <!--								<view class="Navigation-Factory center-row mb-36" @tap.stop="commShow">-->
                                <!--									<fui-icon name="evaluate" color="#FFFFFF" :size="60"></fui-icon>-->
                                <!--									<text class="Navigation-Factory-text">{{ list.commented_no }}</text>-->
                                <!--								</view>-->
                                <!-- 分享 -->
                                <!-- #ifdef MP-WEIXIN -->
                                <button class="u-reset-button" open-type="share" style="border: none"
                                        hover-class="none">
                                    <view class="Navigation-Factory center-row mb-36">
                                        <!-- <fui-icon name="share" color="#FFFFFF" :size="60"></fui-icon> -->
                                        <image class="Navigation-Factory-image"
                                               src="https://sanyanhu.oss-cn-shenzhen.aliyuncs.com/app/static/share-fill.png">
                                        </image>
                                        <text class="Navigation-Factory-text">{{ list.shared_no }}</text>
                                    </view>
                                </button>
                                <!-- #endif -->


                                <!-- 发布视频 -->
                                <view class="Navigation-Factory center-row" @click.stop="goPage('/video/addVideo')">
                                    <image class="Navigation-Factory-image"
                                           src="https://sanyanhu.oss-cn-shenzhen.aliyuncs.com/app/icon/sp.png"></image>
                                    <text class="Navigation-Factory-text">发布视频</text>
                                </view>
                            </view>

                            <!-- 底部 -->
                            <view class="v-footer">
                                <view class="words">
<!--                                    <text :class="list.openText?'showText':'text'">{{list.description}}</text>-->
<!--                                    <text class="show" @tap.stop="list.openText = !list.openText"-->
<!--                                          v-if="list.description.length>37">{{list.openText?'收起':'展开'}}</text>-->
                                </view>
                                <text class="time-bot">
<!--                                    {{ list.create_time.split(' ')[0] }}-->
                                </text>
                            </view>
                        </view>
                    </view>
                    <!-- #ifdef APP -->
        </cell>
    </list>
    <!-- #endif -->

    <!-- #ifndef APP -->
    </swiper-item>
    </swiper>
    <!-- #endif -->
    <tabbar></tabbar>
</template>

<style scoped lang="scss">
.container {
    background-color: #000000;
}

.item {
    /* width : 750rpx; */
    background-color: #000000;
    position: relative;
}

.videoHover {
    position: absolute;
    top: 0;
    left: 0;
    flex: 1;
    background-color: rgba(0, 0, 0, 0.1);
    justify-content: center;
    align-items: center;
    display: flex;
    /* border-style: dashed;
border-color: #DD524D;
border-width: 1px; */
}

.playState {
    width: 160rpx;
    height: 160rpx;
    opacity: 0.2;
}

.userInfo {
    width: 110rpx;
    position: absolute;
    bottom: 0;
    right: 20rpx;
    flex-direction: column;
    padding-bottom: 16rpx;
}

.v-header {
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    text-align: right;
    width: 750rpx;
    padding: 10rpx 30rpx 0;
    display: flex;
    flex-direction: row;
    justify-content: center;

    .search-big {
        height: 72rpx;
        position: relative;
        /* #ifdef APP-NVUE */
        flex: 1;
        margin: 0 auto;

        /* #endif */
        .cancel {
            color: #fff;
            font-size: 28rpx;
            margin-left: 30rpx;
        }

        :deep(.fui-input__wrap) {
            padding: unset !important;
            width: 100% !important;
            height: 100% !important;
            padding-left: 80rpx !important;
        }

        .s-icon-big {
            position: absolute;
            left: 28rpx;
            top: 16rpx;
            color: #ffffff;
        }

        .search-top {}
    }

    .search-left {
        position: absolute;
        left: 30rpx;
        width: 72rpx;
        height: 72rpx;
        background: rgba(0, 0, 0, 0.15);
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .searcg-center {
        width: 308rpx;
        //height: 72rpx;
        background: rgba(0, 0, 0, 0.15);
        border-radius: 1152rpx;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: center;

        .searcg-center-item {
            width: 152rpx;
            //height: 64rpx;
            font-size: 28rpx;
            text-align: center;
            border-radius: 1156rpx;
            font-weight: 500;
            color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: row;
            //line-height: 64rpx;
        }

        .search-active {
            background-color: #F58B25;
            font-size: 30rpx;
        }

        .search-tips {
            position: relative;

            &::after {
                position: absolute;
                content: '';
                width: 10rpx;
                height: 10rpx;
                background: #F93636;
                right: 30rpx;
                top: 10rpx;
                border-radius: 100%;
            }
        }
    }
}

.v-footer {
    max-width: 550rpx;
    //width: calc(100vw - 160rpx);
    position: absolute;
    bottom: 40rpx;
    left: 0;
    padding-left: 30rpx;

    .tg-product {
        width: fit-content;
        padding: 10rpx 12rpx;
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: 6rpx;
        color: #FFFFFF;
        font-weight: 600;
        font-size: 26rpx;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        /* #ifdef APP-NVUE */
        width: 262rpx;
        /* #endif */
        margin-bottom: 18rpx;

        .tg-product-image {
            width: 30rpx;
            height: 30rpx;
        }

        .tg-product-text {
            color: #fff;
        }

        .icon-container {
            width: 38rpx;
            height: 38rpx;
            background: #FFFFFF;
            border-radius: 6rpx;
            margin-right: 14rpx;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .words {
        display: flex;
        align-items: flex-end;
        font-size: 26rpx;
        line-height: 1.5;
        flex-direction: row;

        .text {
            width: 450rpx;
            color: #ffffff;
            overflow: hidden;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            word-break: break-all;

            /* #ifdef APP-NVUE */
            lines: 2;
            /* #endif */
        }

        .showText {
            max-width: 450rpx;
            color: #ffffff;
            word-break: break-all;
        }

        .show {
            flex: 1;
            color: #fff
        }

    }

    .tg-msg {
        font-size: 26rpx;
        font-weight: 400;
        color: #FFFFFF;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: 12rpx;
        position: relative;

        &:before {
            content: '';
            float: right;
            width: 0;
            height: 36rpx;
        }

        .show-btn {
            float: right;
            clear: both;
        }
    }

    .time-bot {
        font-size: 24rpx;
        font-weight: 400;
        color: #E2E2E2;
    }


}

.v-header {}

.Navigation-Factory {
    margin-bottom: 22rpx;
    color: #FFFFFF;
    font-weight: 500;

    .Navigation-Factory-image {
        width: 72rpx;
        height: 72rpx;
        margin-bottom: 8rpx;
    }

    .Navigation-Factory-text {
        color: #fff;
        font-size: 24rpx;
    }
}


.mb-36 {
    margin-bottom: 26rpx;
}

.center-row {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.avatar {
    margin-bottom: 27rpx;

    .avatar-image {
        width: 72rpx;
        height: 72rpx;
        border: 4rpx solid #ffffff;
        border-radius: 36rpx;
        position: relative;
        box-sizing: border-box;
    }

    .attention-bn {
        //position: absolute;
        //left: 50%;
        //bottom: 0;
        //transform: translate(-50%, 50%);
        width: 30rpx;
        height: 30rpx;
        margin-top: -15rpx;
    }

    //&::after {
    //	content: '+';
    //	position: absolute;
    //	left: 50%;
    //	bottom: 0;
    //	width: 24rpx;
    //	height: 24rpx;
    //	background-color: #F58B25;
    //	border-radius: 100%;
    //	transform: translate(-50%, 50%);
    //	text-align: center;
    //	line-height: 24rpx;
    //	font-size: 24rpx;
    //	color: #FFFFFF;
    //}
}

.userAvatar {
    border-radius: 500%;
    margin-bottom: 15px;
    border-style: solid;
    border-width: 2px;
    border-color: #ffffff;
}

.userAvatar {
    width: 100rpx;
    height: 100rpx;
}

.likeIco,
.shareIco,
.commentIco {
    width: 60rpx;
    height: 60rpx;
    margin-top: 15px;
}

.likeNum,
.commentNum,
.shareTex {
    color: #ffffff;
    font-size: 30rpx;
    text-align: center;
    margin: 5px;
}

.likeNumActive {
    color: red;
}

.content {
    width: 620rpx;
    z-index: 99;
    position: absolute;
    bottom: 60px;
    /* justify-content: center; */
    padding: 15rpx;
    flex-direction: column;
    justify-content: flex-start;
    color: #ffffff;
    /* background-color: aqua; */
}

.userName {
    font-size: 30rpx;
    color: #ffffff;
    margin-top: 80upx;
}

.words {
    margin-top: 10rpx;
    font-size: 30rpx;
    color: #ffffff;
}

.root {
    background-color: #000000;
}

.same-container {
    padding: 26rpx 40rpx 28rpx;

    .same-popu-header {
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 50rpx;
    }

    .same-pro-list {
        .same-item {
            flex-direction: row;
            margin-bottom: 34rpx;
        ;

            &:last-child {
                margin-bottom: 0;
            }

            .same-item-image {
                width: 128rpx;
                height: 128rpx;
                border-radius: 2rpx;
                margin-right: 24rpx;
            }

        }

        .pro-msg-con {
            font-size: 24rpx;
            color: #666666;
            width: calc(100% - 152rpx);
            justify-content: space-between;

            .pro-title {
                width: 100%;
                font-size: 28rpx;
                color: #333333;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
            }

            .pro-price {
                font-size: 36rpx;
                color: #F93636;
            }

            .pro-m {
                display: flex;
                flex-direction: row;
                justify-content: space-between;

                .pro-m-text {
                    font-size: 24rpx;
                    color: #666;
                }
            }
        }
    }
}

.comment-container-list {
    padding-top: 32rpx;
    padding-bottom: -2rpx;
    border-top: 2rpx solid #E5E5E5;
    border-bottom: 2rpx solid #E5E5E5;
}

.pay-container {
    padding: 26rpx 0 28rpx;

    .popu-header {
        display: flex;
        align-items: center;
        flex-direction: row;
        padding: 0 38rpx 28rpx;


        .c-h {
            font-size: 28rpx;
            color: #333333;
            font-weight: 600;
            flex: 1;
            text-align: center;

            .c-h-t {
                font-size: 28rpx;
                color: #333333;
                font-weight: 600;
            }
        }

    }


    .comment-list-item {
        margin-bottom: 22rpx;
        padding: 0 28rpx;
        flex-direction: row;
        font-size: 26rpx;
        color: #333333;


        .comm-fir {
            width: 72rpx;
            height: 72rpx;
            border-radius: 100%;
            margin-right: 26rpx;

        }

        .comm-other {
            flex: 1;

            .row-common-num {
                flex-direction: row;
                justify-content: space-between;
                padding-right: 40rpx;
            }

            .common-text {
                margin: 10rpx 0 12rpx;
            }

            .h-color {
                color: #999999;
                flex-direction: row;
            }

            .s-size {
                font-size: 22rpx;
            }

        }

        &:last-child .comm-other .more-box {
            border: unset;
        }

        .more-box {
            color: #3D3D3D;
            font-size: 26rpx;
            padding: 0 0 20rpx 20rpx;
            border-bottom: 2rpx solid #E5E5E5;
            flex-direction: row;

            .more-box-item {
                flex-direction: row;
                align-items: center;
                margin-right: 66rpx;

                &:last-child {
                    margin-right: unset;
                }

                .more-box-text {
                    font-size: 26rpx;
                }
            }
        }
    }

    .m-comment-list {
        padding: unset;

        .comm-fir {
            width: 42rpx;
            height: 42rpx;
            margin-right: 8rpx;
        }
    }
}

.btn-jp {
    flex-direction: row;
    padding: 22rpx 22rpx 0;

    :deep(.fui-input__wrap) {
        height: 68rpx !important;
        background: #F6F6F6 !important;
        padding-left: 16rpx !important;
        border-radius: 10rpx !important;
        color: #333333 !important;
        font-weight: normal !important;
        font-size: 24rpx !important;
    }

    .btn-suc {
        width: 108rpx;
        height: 68rpx;
        background: #F58B25;
        border-radius: 10rpx;
        line-height: 68rpx;
        margin-left: 18rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        & .btn-suc-text {
            color: #FFFFFF;
            font-size: 28rpx;
            font-weight: 600;
        }
    }
}
</style>